<template>
  <div>
    <validator name="verifyForm">
      <form role="form" name="Form" class="col-md-4 col-md-offset-4 form-margin">
        <div class="form-group">
          <label for="newEmail">我们向<span v-if="state.method=='email'" class="primary">{{account.email}}</span> <span v-if="state.method=='mobile'" class="primary">{{account.mobile}}</span>发送了验证码</label>
          <label>请输入收到的验证码</label>
          <div class="input-group">
            <input type="text" autocomplete="off" class="form-control" id="chkCode" initial="off" detect-change="off" v-validate:chk-code="['required']" v-model="account.chkCode" placeholder="请输入验证码">
            <span class="input-group-btn">
              <button class="btn btn-default" :disabled="state.resendTime!==0" v-on:click.prevent="resend" >重新发送<span v-show="state.resendTime">{{'('+state.resendTime+')'}}</span></button>
            </span>
          </div>
          <div>
            <error-template v-show="$verifyForm.chkCode.required">{{$verifyForm.chkCode.required}}</error-template>
          </div>
        </div>
        <div class="form-group">
          <button class="btn btn-primary form-control" v-on:click.prevent="validChkCode">下一步</button>
        </div>
        <div class="form-group text-center">
          <a href="" v-on:click.prevent="choose">换用其他验证方式</a>
        </div> 
      </form>
    </validator>
  </div>
</template>
<script>
/**
 * @author guocailee
 */
import { verifyMailForgetPwdCaptcha as verifyMail, verifyForgetPwdCaptcha as verifySMS } from 'src/api/check'
export default {
  props: {
    account: {
      required: true,
      type: Object
    },
    state: {
      required: true,
      type: Object
    }
  },
  methods: {
    resend() {
      this.$dispatch('send')
    },
    checkDyCode(account) {
      if (this.state.method === 'email') {
        return verifyMail(account)
      } else {
        return verifySMS(account)
      }
    },
    validChkCode() {
      let self = this
      this.$validate(() => {
        if (self.$verifyForm.invalid) {
          return
        }
        self.checkDyCode(self.account)
        .then(data => self.$dispatch('setStep', 4))
        .catch(message => self.$notify.error(message))
      })
    },
    choose() {
      this.$dispatch('setMethod', 'choose')
    }
  }
}
</script>